<template>
	<view class="">
		<u-form :model="form" ref="uForm">
		<!-- 	<view class=""
				style="margin: auto;text-align: center;width: 750rpx;display: flex;justify-content: center;background: #fff;padding-top: 40rpx;">

				<upload_img ref="videoUpload" type="image" @uploaded="uploaded" :afterLoadUrl="form.logo"
					defaultLength="1" icontxt="LOGO" width="170" height="170" cutType="ss" borderRadius="200">
				</upload_img>



			</view> -->

			<view style="background: #FFFFFF;padding: 0 40rpx;">
	
				<u-form-item label="姓名" label-width="200" prop="realname">
					<u-input v-model="form.realname" placeholder="请输入姓名" />
				</u-form-item>
				<u-form-item label="名称" label-width="200" prop="name">
					<u-input v-model="form.name" placeholder="请输入店铺名称" />
				</u-form-item>
			
				<u-form-item label="电话" label-width="200" prop="mobile">
					<u-input v-model="form.mobile" placeholder="请输入电话" type="Number" maxlength="11" />
				</u-form-item>
				<u-form-item label="地址" label-width="200" prop="address">
					<u-input v-model="form.address" placeholder="请输入店铺地址" />
				</u-form-item>
			</view>

			<u-gap bg-color="#f1f1f1"></u-gap>

			<view style="background: #FFFFFF;">
				<view style="padding: 30rpx 0 0 30rpx;color: #6C6C6C;">请上传身份证正反照片</view>
				<view class="u-flex u-row-between u-padding-20">
					<view class="">
						<upload_img ref="card_1" type="image" @uploaded="uploaded" :afterLoadUrl="form.card_1"
							defaultLength="1" width="320" height="200" cutType="" borderRadius="20" icon=""
							bgUrl="app/images/card_1.png">
						</upload_img>
						<view class="u-margin-top-15" style="text-align: center;color: #6C6C6C;">
							点击上传身份证正面
						</view>
					</view>
					<view class="">
						<upload_img ref="card_2" type="image" @uploaded="uploaded" :afterLoadUrl="form.card_1"
							defaultLength="1" width="320" height="200" cutType="" borderRadius="20" icon=""
							bgUrl="app/images/card_2.png">
						</upload_img>
						<view class="" style="text-align: center;color: #6C6C6C;margin-top: 10rpx;">
							点击上传身份证反面
						</view>
					</view>

				</view>
				<view class="u-padding-20 u-border-top" style="color: #6C6C6C;text-align: center;">
					拍摄时请确保身份证<text style="color: #EF8139;">边框完整 字体清晰</text>
				</view>
			</view>


			<view class=""
				style="background: #fff;width: 690rpx;margin: auto;padding: 20rpx;margin-top: 40rpx;border-radius: 20rpx;">

				<u-form-item label=" " label-width="0" prop="liuyan">

					<u-input v-model="form.liuyan" placeholder="申请理由：描述您的行业，商品类型，业务范围 等信息(150字以内，不少于10个字)"
						type="textarea" height="150"></u-input>
				</u-form-item>

			</view>
			
			
			<view class="" style="width: 600rpx;margin:40rpx auto;font-size: 20rpx;">
				<u-checkbox-group>
					<u-checkbox v-model="isread" :label-disabled="true">
						请认真阅读<text @click="read(6)">《用户服务协议及隐私政策》</text>
						</u-checkbox>
				</u-checkbox-group>
			</view>


			<u-button @click="submit" type="primary"
				:custom-style="{width:'600rpx',marginTop:'40rpx',background:'#0064C6'}" shape="circle">立即申请</u-button>


		</u-form>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import upload_img from '../../components/upload_img.vue';
	export default {
		components: {
			upload_img
		},
		watch: {

		},
		data() {
			return {
				isread:false,
				
				form: {
					card_1: "",
					card_2: "",
					logo: "",
					name: "",
					mobile: "",
					address: "",
					liuyan: "",
					realname:""
				},
				rules: {
					
					realname: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					name: [{
						required: true,
						message: '请输入店铺名称',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					logo: [{
						required: true,
						message: 'logo',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					liuyan: [{
						min: 10,
						required: true,
						message: '请输申请理由不能少于10字',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],

					address: [{
						required: true,
						message: '请输入地址',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},

		onLoad() {
			

		},
		methods: {
			read(e){
				uni.navigateTo({
					url:'../help/detail?id='+e
				})
			},
		
			submit() {
				if(!this.isread){
										   this.$u.toast("请认真阅读协议")
										   return
						}
				// if (!this.$refs.videoUpload.afterUploadImgList.length) {
				// 	this.$u.toast("请上传logo")
				// 	return
				// }
				if (!this.$refs.card_1.afterUploadImgList.length) {
					this.$u.toast("请上传身份证正面")
					return
				}
				if (!this.$refs.card_2.afterUploadImgList.length) {
					this.$u.toast("请上传上传身份证反面")
					return
				}

				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$u.post('/api/index/apply', {	
							name:this.form.name,		
							phone:this.form.mobile,	
							address:this.form.address,
							remark:this.form.liuyan,
							realname:this.form.realname,
							idcard_front:this.$refs.card_1.afterUploadImgList,
							idcard_back:this.$refs.card_2.afterUploadImgList,
							// logo:this.form.logo
							
						}).then(res => {
								this.$refs.uToast.show({
									title: '提交成功,请耐心等待后台审核',
									type: 'success',
									back:true
								})
						}).catch(err => {})



					} else {
						console.log('验证失败');
					}
				});

			}
		}
	}
</script>

<style>
	page {
		background: #F1F1F1;
	}

	.choose_area {
		margin-bottom: 10rpx !important;
	}
</style>
